<template>
    <div class="video-content">
        <div class="right">
            <!-- 主屏幕位置 -->
            <slot name="main-screen"></slot>
            <div class="main-screen-nick">
                <slot name="main-screen-nick"></slot>
            </div>
        </div>
        <div class="left">
            <!-- 右侧屏幕列表 -->
            <slot name="list-screen"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.video-content {
    width: 100%;
    height: 100%;
    display: flex;

    .right {
        flex: 1;
        height: 100%;
        background-color: #292929;
        border: 2px solid #2c2c2c;
        border-radius: 5px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        .main-screen-nick {
            position: absolute;
            bottom: 5px;
            left: 5px;
            color: #797979;
            font-size: 12px;
        }
    }

    .left {
        width: 215px;
        height: 100%;
        margin-left: 10px;
        overflow: hidden;
    }
}
</style>